<!DOCTYPE html>
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>小游戏</title>

<script type="text/javascript">
	var newDirection='right';
	var nextDirection='right';

	function snakeMove() {
		var snakeBody=document.getElementsByName('snake');
		var snakeHeadLeft=snakeBody.item(0).style.left;
		var snakeHeadTop=snakeBody.item(0).style.top;
		var snakeBodyLeft=null;
		var snakeBodyTop=null;

		nowDirection=nextDirection;
		if(nextDirection=='left'){
				snakeBody.item(0).style.left=(parseInt(snakeBody.item(0).style.left)-20+500)%500+'px';
		}else if(nextDirection=='right'){
			snakeBody.item(0).style.left=(parseInt(snakeBody.item(0).style.left)+20)%500+'px';
		}else if(nextDirection=='up'){
			snakeBody.item(0).style.top=(parseInt(snakeBody.item(0).style.top)-20+300)%300+'px';
		}else if(nextDirection=='down'){
			snakeBody.item(0).style.top=(parseInt(snakeBody.item(0).style.top)+20)%300+'px';
		}

		for (var i=1;i<snakeBody.length;i++) {
			snakeBodyLeft=snakeBody.item(i).style.left;
			snakeBodyTop=snakeBody.item(i).style.top;
			snakeBody.item(i).style.left=snakeHeadLeft;
			snakeBody.item(i).style.top=snakeHeadTop;
			snakeHeadLeft=snakeBodyLeft;
			snakeHeadTop=snakeBodyTop;
		}

		if(checkFood(snakeBody)){
			snakeBodyAdd(snakeBody,snakeHeadLeft,snakeHeadTop);
		}
	}

	function snakeBodyAdd(snakeBody,Left,Top) {
		var screens=document.getElementById('screen');
		var newBody=snakeBody.item(snakeBody.length-1).cloneNode(true);
		newBody.style.left=Left;
		newBody.style.top=Top;
		screens.appendChild(newBody);
	}

	function checkFood(subSnakeBody) {
		var food=document.getElementById('food');
		var snakeHead=document.getElementById('snakeHead');
		if (snakeHead.style.left==food.style.left&&snakeHead.style.top==food.style.top) {
				newFood();
				return true;
		}
		return false;
	}

	function newFood() {
		var foodLeft=parseInt(Math.random()*24)*20+'px';
		var foodTop=parseInt(Math.random()*14)*20+'px';
		var food=document.getElementById('food');
		food.style.left=foodLeft;
		food.style.top=foodTop;
	}

	function screenFocus() {
		document.getElementById('screen').focus();
	}
	function main() {
		var screens=document.getElementById('screen');
		screens.focus();
		screens.onkeydown=function (e) {controlDeriction(e);};
		window.setInterval("screensFocus()",10);
		window.setInterval("snakeMove()",100);
	}

	function controlDeriction(e) {
		e=e||window.event;
		if(e.keyCode==37&&nowDirection!='right')nextDirection='left';
		else if(e.keyCode==38&&nowDirection!='down')nextDirection='up';
		else if(e.keyCode==39&&nowDirection!='left')nextDirection='right';
		else if(e.keyCode==40&&nowDirection!='up')nextDirection='down';
	}
	</script>
	<style type="text/css">
		h1{
			text-align: center;
			color: blue;
		}
		.snake{
			border:0px;
			position:absolute;
			width: 20px;
			height:20px;
			background:#000000;
		}
		#screen{
			margin:auto;
			width:500px;
			height:300px;
			position: relative;
			background: #00FF00;
		}
	</style>
</head>
<body>
	<h1>小游戏</h1>
	<div id="screen" tabindex="0">
	<div id="snakeHead" name="snake" class="snake" style="top:100px;left:100px;"></div>
	<div name="snake" class="snake" style="top:100px; left: 80px;"></div>
	<div name="snake" class="snake" style="top:100px; left: 60px;"></div>
	<div name="snake" class="snake" style="top:100px; left: 40px;"></div>
	<div name="snake" class="snake" style="top:100px; left: 20px;"></div>
	<div id="food" class="snake" style="top: 100px; left: 200px; background: red;"></div>
	</div>
	<input type="button" onclick="main()" value="开始" />
	<p>使用方向键↑、↓、←、→来控制小蛇的上下左右移动</p>
</body>
</html>